README
------

The skins that are supported by the Hosted Payment Form are extremely flexible. They allow for more or less any HTML content to be specified, that will essentially be used to "wrap around" the payment form itself. Almost anything that is valid HTML will be usable as a skin. Having said that the following rules/restrictions will apply to the skin that will ultimately be submitted:

1) The HTML MUST have be well formed
2) The HTML MUST have both a <head> and a <body> section
3) The first text in the <head> section MUST be @@DefaultStyleFiles@@
4) The <body> section must have the attribute onload="ApplicationLoadHandler();"
5) The first tags in the <body> section must be the divs for the AJAX progress panel:
    <div id="AJAXUpdatePanel_Panel" style="display:none;"></div>
    <div id="AJAXUpdatePanel_Spinner" style="display:none;"></div>
6) The <body> tag MUST contain the text @@Content@@, which denotes where the payment form will be put
7) The HTML must NOT contain any instances of the "magic" words @@DefaultStyleFiles@@ and @@Content@@ where they are NOT intended for substitution by our system
8) You MUST NOT define the JavaScript function ApplicationLoadHandler()

We recommend that you look at the files in the "Skin 1" and "Skin 2" example skins folder, and that you use the "Blank Skin" template as a starting point - there are 2 HTML files that will be of interest: 

1) indexSystemSimulation.htm - this contains links to the system CSS files and also contains some example form content - this simulates the live environment that the form will ultimately operate in. This will allow you to quickly build you skin and easily see what effect will be had - even on the CSS rules and images that are in system files that you don't have direct access to. You can however see their effect on your skin and also your skin's effect on them
2) indexSubmissionReady.htm - this has all the "working" links and content removed and is in its submission ready state.

It would be a good starting point to compare these 2 files, and become comfortable with the differences between them - i.e. what you will need to do to your system simulation file to make it submission ready.

A NOTE ABOUT THE SYSTEM FILES
-----------------------------
The files in the System directory are not intended to be edited or changed in any way. They simply allow you to have "local" copies of the system CSS and image files (which you won't have direct access to when your skin is live on the system), and allows for a simple local simulation of these files

There is only 1 thing to note about these files: you must NOT change them in any way... If you build your skin to rely on the files in this directory being changed, then your skin will not appear as intended when it is uploaded.

If you need to "override" the rules for system CSS classes, then you must re-define them in YOUR CSS. You don't need to re-define them as a whole (because of the way that CSS classes cascade their rules, and the system rules will always be declared first), you only need to re-define the specific rules of the classes that you want to change.

For Example the System CSS Rule for "ContentHeader" is:

.ContentHeader
{
    background-image:url('../Images/YellowTiny.jpg');
    height:25px;
    line-height:25px;
    background-repeat:no-repeat;
    background-position:bottom left;
    font-size:18px;
    clear:both;/*right*/
    padding-left:20px;
    padding-top:0px;
}

To remove the background image and change the font size to 20px, then all you need do is put the following CSS in YOUR CSS:

.ContentHeader
{
    background-image:none;
    font-size:20px;
}

CSS Specifiers
--------------
The payment form itself is provided by the system and so the HTML in this section cannot be modified as part of the skinning process.  However, there are CSS classes and ids attached to all elements in the form which makes it possible to affect the styling.
Below is a list of the CSS classes that can be used and an explanation of what elements they select:

.ContentRight - Each of the four sections (Order details, Card details, Customer details and the Submit button section)
.ContentHeader - Header text for each of the four sections
.FormItem - Div that contains the label and input nodes
.FormLabel - Div that contains the label text node
.FormInputTextOnly - Div that contains non-editable input (i.e. the content in the Order Details section)
.FormInput - Div that contains the input node(s) for this field.  Note that this can be more than 1 node e.g. the Expiry Date dropdowns
.FormSubmit - Div that contains the submit button
.InputTextField - Full width text input element
.InputDropDownList - Full width select element
.InputTextFieldSmall - Small text input element
.InputDropDownListSmall - Small select element
.DESVALRequiredFieldMarker - Marker to show that a field is required

We provide the following CSS IDs that can be used to specify individual elements:

#ValidationErrorModalPopupBox - Modal box that shows when the submit button is pressed but there are validation errors
#RequiredFieldsDescription - Legend for the required field icon
#OrderDetailsHeader Header text for the Order Details section
#MerchantNamePanel - Div that contains the Merchant Name .FormInput
#MerchantNameLabel - Label for the Merchant Name field
#AmountAndCurrencyLabel - Amount and currency span element
#PayByLinkAmount - Amount input element (only available when allowing the customer to determine the amount of the transaction)
#CurrencyList - Currency select element (only available when allowing the customer to determine the currency of the transaction)
#OrderIDLabel - Order ID span element
#OrderDescriptionPanel - Div that contains the Order Description .FormInput
#OrderDescriptionLabel - Order description span element
#CardDetailsHeader - Header text for the Card Details section
#CardName - Card Name input element
#CardNumber - Card Number input element
#ExpiryDateMonthList - Card Expiry Date Month select element
#ExpiryDateYearList - Card Expiry Date Year select element
#IssueNumber - Card Issue Number input element
#CV2 - Card CVV(CV2) input element
#InstructionsHelpButton - Button to bring up the #CV2InstructionsModalPopupBox
#CV2InstructionsModalPopupBox - Modal showing CV2 instructions
#CustomerDetailsHeader - Header Text for the Customer Details Section
#Address1 - Billing Address Line 1 input element
#Address2 - Billing Address Line 2 input element
#Address3 - Billing Address Line 3 input element
#Address4 - Billing Address Line 4 input element
#City - Billing Address City input element
#State - Billing Address State input element
#PostCode - Billing Address Post Code input element
#CountryList - Billing Address Country select element
#EmailAddressPanel - Div containing Customer Email Address label and input nodes
#EmailAddress - Customer Email Address input element
#PhoneNumberPanel - Div containing Customer Phone Number label and input nodes
#PhoneNumber - Customer Phone Number input element
#CharityDonationPanel - Div containing Charity Donation label and input nodes (only if enabled on your account)
#SubmitButton - Form submit button
#ACSFrame - ACS (3D Secure) iframe
#ProceedToWebshopButton - Button shown when using the POST integration method, but supplying a http:// CallbackURL rather than a https:// one
#DisplayResultPanel - Div containing the results of the transaction when PaymentFormDisplaysResult is passed as true
#DisplayResultLabel - Span containing the result text of the transaction PaymentFormDisplaysResult is passed as true
#MerchantNameFormLabel - Merchant Name label
#AmountFormLabel - Amount label
#OrderIDFormLabel - Order ID label
#OrderDescriptionFormLabel - Order Description label
#CardNameFormLabel - Card Name label
#CardNumberFormLabel - Card Number label
#ExpiryDateFormLabel - Card Expiry Date label
#IssueNumberFormLabel - Card Issue Number label
#CV2FormLabel - Card CVV (CV2) label
#Address1FormLabel - Billing Address Line 1 label
#Address2FormLabel - Billing Address Line 2 label
#Address3FormLabel - Billing Address Line 3 label
#Address4FormLabel - Billing Address Line 4 label
#CityFormLabel - Billing City label
#StateFormLabel - Billing State label
#PostCodeFormLabel - Billing Post Code label
#CountryFormLabel - Billing Country label
#EmailAddressFormLabel - Customer Email Address label
#PhoneNumberFormLabel - Customer Phone Number label
